<template>
    <span class="xkl-text xkl-text-radio">{{ label }}</span>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useDict } from './hooks';
defineOptions({ name: 'XklTextRadio' })
const props = defineProps(['form', 'option'])

const { form, option } = props

const dict = option.config.dict

const { list, loaded } = useDict(dict)

loaded(() => {
    if (!dict) {
        list.value = option.config.list.map(item => {
            return {
                dictValue: item.value,
                dictLabel: item.label
            }
        }) || []
    }
})

const label = computed(() => {
    const item = list.value.find(item => item.dictValue == form[option.prop]) || { dictLabel: '' }
    return item.dictLabel;
})

if (form._label) {
    form._label[option.prop] = label
} else {
    form._label = {
        [option.prop]: label
    }
}
</script>
<style lang="scss" scoped></style>